<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { computed, h, ref } from 'vue'
import { Button, Modal, Popover, Radio, Space, message } from 'ant-design-vue'
import { ExclamationCircleFilled, MailOutlined, PhoneOutlined, UserOutlined } from '@ant-design/icons-vue'
import { getRegistrationsApi, getSubjectApi, submitRegistrationApi } from '~/api/common/login'

const router = useRouter()
const loading = shallowRef(false)
const subjects = ref<any[]>([])
const registrations = ref<any[]>([])
const activeTab = ref<'exam' | 'training'>('exam')
const tabStyleMode = 'underline'

const coverMap: Record<string, string> = {
  CDCS_FIRST: new URL('@/assets/images/CDCS.jpg', import.meta.url).href,
  CSDG_FIRST: new URL('@/assets/images/csdg.jpg', import.meta.url).href,
  CDCS_RESIT: new URL('@/assets/images/cdcs_bu.png', import.meta.url).href,
  CSDG_RESIT: new URL('@/assets/images/csdg.jpg', import.meta.url).href,
}
const categoryVisualMap: Record<string, { gradient: string }> = {
  培训: {
    gradient: 'linear-gradient(135deg, #0f766e 0%, #34d399 100%)',
  },
  考试: {
    gradient: 'linear-gradient(135deg, #1d4ed8 0%, #60a5fa 100%)',
  },
}
const defaultCover = ''

interface ContactInfo {
  name: string
  phone: string
  email: string
}

const contactInfoMap: Record<string, ContactInfo> = {
  CDCS: { name: '郭老师', phone: '010-82217209', email: 'cdcschina@ccpit.org' },
  CSDG: { name: '郭老师', phone: '010-82217209', email: 'csdgchina@ccpit.org' },
  CITF: { name: '郭老师', phone: '010-82217209', email: 'citfchina@ccpit.org' },
  CERTPAY: { name: '郭老师', phone: '010-82217209', email: 'certpaychina@ccpit.org' },
  CSCF: { name: '隋老师', phone: '010-82217205', email: 'cscfchina@ccpit.org' },
  CITR: { name: '隋老师', phone: '010-82217205', email: 'citrchina@ccpit.org' },
  CDCS_TRAINING: { name: '刘老师', phone: '010-82217260', email: 'liutianyi@ccpit.org' },
  CSDG_TRAINING: { name: '刘老师', phone: '010-82217260', email: 'liutianyi@ccpit.org' },
}

const defaultContactInfo: ContactInfo = {
  name: '培训中心',
  phone: '010-82217209',
  email: 'cdcschina@ccpit.org',
}
function resolveSubjectKey(item: any) {
  const code = (item?.subject_code || item?.exam_subject?.subject_code || '').toUpperCase()
  const name = (item?.subject_name || item?.exam_subject?.subject_name || '').toUpperCase()
  const text = `${code} ${name}`
  if (text.includes('CDCS'))
    return 'CDCS'
  if (text.includes('CSDG'))
    return 'CSDG'
  if (text.includes('CITF'))
    return 'CITF'
  if (text.includes('CERTPAY'))
    return 'CERTPAY'
  if (text.includes('CSCF'))
    return 'CSCF'
  if (text.includes('CITR'))
    return 'CITR'
  return ''
}

function getContactInfo(item: any): ContactInfo {
  const baseKey = resolveSubjectKey(item)
  if (!baseKey)
    return defaultContactInfo
  if (isTrainingSubject(item) && (baseKey === 'CDCS' || baseKey === 'CSDG')) {
    const trainingKey = `${baseKey}_TRAINING`
    return contactInfoMap[trainingKey] || contactInfoMap[baseKey] || defaultContactInfo
  }
  return contactInfoMap[baseKey] || defaultContactInfo
}

function isTrainingSubject(item: any) {
  const category = (item?.category || item?.exam_category || item?.exam_subject?.category || '').toString()
  if (category) {
    const normalized = category.toLowerCase()
    if (normalized.includes('培训') || normalized.includes('training'))
      return true
  }

  const name = (item?.subject_name || item?.exam_subject?.subject_name || '').toString()
  if (name.includes('培训'))
    return true

  const code = (item?.subject_code || '').toUpperCase()
  return code.includes('TRANING') || code.includes('TRAINING') || code.includes('TRAIN')
}

function getSubjectCover(item: any) {
  const coverFromApi = item?.cover_image || item?.coverImage || ''
  if (coverFromApi)
    return coverFromApi
  const code = item?.subject_code || ''
  return (code && coverMap[code]) ? coverMap[code] : defaultCover
}

function getSubjectCategory(item: any) {
  if (isTrainingSubject(item))
    return '培训'
  return '考试'
}

function getCoverStyle(item: any): CSSProperties {
  const cover = getSubjectCover(item)
  if (cover) {
    return {
      backgroundImage: `url(${cover})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat',
    } as CSSProperties
  }
  const category = getSubjectCategory(item)
  const fallbackGradient = categoryVisualMap['考试'].gradient
  const gradient = categoryVisualMap[category]?.gradient || fallbackGradient
  return {
    background: gradient,
  } as CSSProperties
}

function getCoverInlineStyle(item: any): CSSProperties {
  return {
    ...getCoverStyle(item),
    height: '190px',
    position: 'relative' as CSSProperties['position'],
  } as CSSProperties
}

const filteredSubjects = computed(() => {
  return subjects.value.filter((item) => {
    const isTraining = isTrainingSubject(item)
    return activeTab.value === 'training' ? isTraining : !isTraining
  })
})

function findMakeupSubject(source: any) {
  const code = source?.subject_code || ''
  if (code.endsWith('_RESIT'))
    return source
  const examClass = source?.exam_class
  if (!examClass)
    return null
  return subjects.value.find((subject: any) => {
    const sc = subject?.subject_code || ''
    return subject?.exam_class === examClass && sc.endsWith('_RESIT')
  }) || null
}

function getSubjectStatus(item: any) {
  if (item.status) {
    const status = item.status
    switch (status) {
      case 0: return { text: '未开放', tag: 'gray', action: '继续填写报名' }
      case 1: return { text: '报名中', tag: 'primary', action: '立即缴费' }
    }
  }
  return { text: '暂未开放', tag: 'gray', action: '敬请期待' }
}

function clickSubject(item: any, options?: { mode?: 'first' | 'makeup' }) {
  const forceResit = options?.mode === 'makeup'
  const targetItem = forceResit ? (findMakeupSubject(item) || item) : item
  const code: string = targetItem?.subject_code || ''
  const examClass: string = targetItem?.exam_class || ''
  const isResit = forceResit || code.endsWith('_RESIT')

  if (!forceResit && isTrainingSubject(targetItem)) {
    Modal.confirm({
      title: '培训报名确认',
      content: '此项目为培训项目，是否确认提交培训报名？',
      okText: '是',
      cancelText: '否',
      centered: true,
      onOk: async () => {
        await createTrainingRegistration(targetItem)
      },
    })
    return
  }

  // 获取当前科目的报名记录
  const currentReg = registrations.value.find((r: any) => {
    const sc = r?.subject_code || r?.exam_subject?.subject_code
    return sc === code
  })

  // 获取所有同一 exam_class 的报名记录
  const sameClassRegs = registrations.value.filter((r: any) => {
    const regExamClass = r?.exam_subject?.exam_class || ''
    return regExamClass === examClass && examClass !== ''
  })

  // 如果是补考
  if (isResit) {
    // 检查是否有同一 exam_class 的首次报名已通过的记录
    const hasPassedFirstTime = registrations.value.some((r: any) => {
      const sc = r?.subject_code || r?.exam_subject?.subject_code
      const regExamClass = r?.exam_subject?.exam_class || ''
      const status = r?.registration_status
      return regExamClass === examClass
        && examClass !== ''
        && sc
        && !sc.endsWith('_RESIT')
        && status === 4 // 考试已通过
    })

    if (hasPassedFirstTime) {
      Modal.info({
        title: '提示',
        content: '当前考试已经通过，无法操作。',
      })
      return
    }

    // 找到所有同一 exam_class 的首次报名记录（不包含补考），排除已取消的记录
    const firstTimeRegs = sameClassRegs.filter((r: any) => {
      const sc = r?.subject_code || r?.exam_subject?.subject_code
      const status = r?.registration_status
      return sc && !sc.endsWith('_RESIT') && status !== 7 // 排除已取消的记录
    })

    // 如果没有有效的首次报名记录，检查是否有取消的记录
    const hasCanceledFirstTime = sameClassRegs.some((r: any) => {
      const sc = r?.subject_code || r?.exam_subject?.subject_code
      const status = r?.registration_status
      return sc && !sc.endsWith('_RESIT') && status === 7
    })

    // 如果没有有效的首次报名记录，但有过取消的记录，提示先进行首次报名
    if (firstTimeRegs.length === 0 && hasCanceledFirstTime) {
      Modal.confirm({
        title: '提示',
        content: '补考报名需已报考过该考试的首次报名，是否继续？',
        onOk: () => {
          router.push({
            path: '/form/makeupregistrationform',
            query: { subjectCode: code },
          })
        },
        onCancel: () => {},
        okText: '是',
        cancelText: '否',
      })
      return
    }

    // 如果没有有效的首次报名记录，且没有取消的记录，也不能补考
    if (firstTimeRegs.length === 0) {
      Modal.confirm({
        title: '提示',
        content: '补考需提前报考过该考试，是否继续？',
        onOk: () => {
          router.push({
            path: '/form/makeupregistrationform',
            query: { subjectCode: code },
          })
        },
        onCancel: () => {},
        okText: '是',
        cancelText: '否',
      })
      return
    }

    // 检查是否有进行中的记录（排除已取消的状态）
    const hasInProgress = firstTimeRegs.some((r: any) => {
      const status = r?.registration_status
      return status === 0 || status === 1 || status === 2 || status === 3 || status === 6
    })

    // 检查是否有不合格的记录（不一定全部不合格）
    const hasFailed = firstTimeRegs.some((r: any) => {
      const status = r?.registration_status
      return status === 5 // 考试不合格
    })

    // 如果有进行中的首次报名，不能补考
    if (hasInProgress) {
      Modal.confirm({
        title: '提示',
        content: '查询你已有该科目正在进行中的报名，是否继续？',
        onOk: () => {
          router.push({
            path: '/form/makeupregistrationform',
            query: { subjectCode: code },
          })
        },
        onCancel: () => {},
        okText: '是',
        cancelText: '否',
      })
      return
    }

    // 检查当前补考记录的状态
    if (currentReg) {
      const status = currentReg.registration_status

      // 信息待完善 - 继续填写
      if (status === 0) {
        Modal.confirm({
          title: '提示',
          content: '您该科目考试上一次报名表单还未提交，是否继续填写？',
          onOk: () => {
            router.push({
              path: '/form/makeupregistrationform',
              query: {
                subjectCode: code,
                registrationId: String(currentReg.id),
              },
            })
          },
          onCancel: () => {},
          okText: '是',
          cancelText: '否',
        })
        return
      }

      // 报名已取消 - 重新报名
      if (status === 7) {
        router.push({
          path: '/form/makeupregistrationform',
          query: { subjectCode: code },
        })
        return
      }

      // 已报名、已缴费待审核、已缴费待考试 - 不能重复报名
      if (status === 1 || status === 2 || status === 3 || status === 6) {
        Modal.confirm({
          title: '提示',
          content: '您已成功完成报名，是否继续报名？',
          onOk: () => {
            router.push({
              path: '/form/regrationform',
              query: {
                subjectCode: code,
              },
            })
          },
          onCancel: () => {},
          okText: '是',
          cancelText: '否',
        })
        return
      }
      // 考试已通过 - 无需补考
      if (status === 4) {
        Modal.info({
          title: '提示',
          content: '您已经通过本科目补考，无需再次报名。',
        })
        return
      }

      // 考试不合格 - 可以重新报名补考
      if (status === 5) {
        router.push({
          path: '/form/makeupregistrationform',
          query: { subjectCode: code },
        })
        return
      }
    }

    // 如果没有当前补考记录，但有不合格的首次报名记录，可以进入补考报名
    if (hasFailed) {
      router.push({
        path: '/form/makeupregistrationform',
        query: { subjectCode: code },
      })
      return
    }

    // 其他情况不允许补考
    Modal.info({
      title: '提示',
      content: '不符合补考条件，无法进行补考报名。',
    })
    return
  }

  // 如果是首次报名
  // 检查当前科目本身的状态
  if (currentReg) {
    const status = currentReg.registration_status

    // 信息待完善 - 继续填写
    if (status === 0) {
      Modal.confirm({
        title: '提示',
        content: '您该科目考试上一次报名表单还未提交，是否继续填写？',
        onOk: () => {
          router.push({
            path: '/form/regrationform',
            query: {
              subjectCode: code,
              registrationId: String(currentReg.id),
            },
          })
        },
        onCancel: () => {},
        okText: '是',
        cancelText: '否',
      })
      return
    }

    // 报名已取消 - 重新报名
    if (status === 7) {
      router.push({
        path: '/form/regrationform',
        query: { subjectCode: code },
      })
      return
    }

    // 已报名、已缴费待审核、已缴费待考试 - 不能重复报名
    if (status === 1 || status === 2 || status === 3 || status === 6) {
      Modal.confirm({
        title: '提示',
        content: '您已成功完成报名，是否继续报名？',
        onOk: () => {
          router.push({
            path: '/form/regrationform',
            query: {
              subjectCode: code,
            },
          })
        },
        onCancel: () => {},
        okText: '是',
        cancelText: '否',
      })
      return
    }

    // 考试已通过 - 无需再次报名
    if (status === 4) {
      Modal.info({
        title: '提示',
        content: '当前考试已通过，无法报名。',
      })
      return
    }

    // 考试不合格 - 提示参加补考
    if (status === 5) {
      Modal.info({
        title: '提示',
        content: '当前考试不合格，请参加对应的补考考试。',
      })
      return
    }
  }

  // 检查同一 exam_class 的所有报名记录
  // 查找是否有未提交的记录（只检查状态0，不包含已取消的）
  const activeSameClassRegs = sameClassRegs.filter((r: any) =>
    r?.registration_status !== 7, // 排除已取消的记录
  )

  if (activeSameClassRegs.length > 0) {
    const unsubmittedReg = activeSameClassRegs.find((r: any) =>
      r?.registration_status === 0, // 只检查待完善状态
    )

    if (unsubmittedReg) {
      // 如果当前科目没有记录，但同一类考试有其他未提交的记录，提示上一次未提交
      if (!currentReg || currentReg.id !== unsubmittedReg.id) {
        Modal.info({
          title: '提示',
          content: '您上一次报名表单还未提交，请先完成上次报名。',
        })
        return
      }
    }

    // 问题1修复：如果所有同一考试类别的记录都是已取消，应该允许首次报名
    const allCanceled = activeSameClassRegs.length === 0 && sameClassRegs.length > 0
      && sameClassRegs.every((r: any) => r?.registration_status === 7)

    if (allCanceled) {
      // 允许进入首次报名
      router.push({
        path: '/form/regrationform',
        query: { subjectCode: code },
      })
      return
    }
  }

  // 如果没有记录或记录状态允许，可以进入首次报名
  router.push({
    path: '/form/regrationform',
    query: { subjectCode: code },
  })
}

async function init() {
  if (loading.value)
    return
  loading.value = true
  try {
    const { data } = await getSubjectApi()
    const { data: regData } = await getRegistrationsApi()
    const regList = Array.isArray(regData) ? regData : []
    registrations.value = regList
    const list = Array.isArray(data) ? data : []
    subjects.value = list.filter((it: any) => it?.status === 1)
  }
  finally {
    loading.value = false
  }
}

onMounted(() => {
  init()
})

const creatingTrainingRegistration = ref(false)

async function createTrainingRegistration(item: any) {
  if (creatingTrainingRegistration.value)
    return
  creatingTrainingRegistration.value = true
  try {
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    const payload = {
      subject_code: item?.subject_code || '',
      subject_name: item?.subject_name || item?.subject_code || '',
      exam_fee: item?.exam_fee ?? item?.exam_subject?.exam_fee ?? '',
      registration_status: 7,
      registration_type: 'training',
      category: getSubjectCategory(item),
      username: userInfo?.userName || '',
      phone: userInfo?.userPhone || '',
      email: userInfo?.userEmail || '',
      company_name: userInfo?.userCompany || '',
      cover_image: item?.cover_image || '',
      exam_subject: item,
    }
    const resp = await submitRegistrationApi(payload) as any
    if (resp?.code === 0 || resp?.success) {
      Modal.success({
        title: '提示',
        content: '培训报名已提交，前往"我的报名"查看。',
        centered: true,
        onOk: () => {
          router.push('/myexamlist/myExam')
        },
      })
    }
    else {
      message.error(resp?.message || '培训报名提交失败，请稍后重试')
    }
  }
  catch (error: any) {
    console.error('培训报名提交失败', error)
    message.error(error?.message || '培训报名提交失败，请稍后重试')
  }
  finally {
    creatingTrainingRegistration.value = false
  }
}

// 处理立即报名按钮点击
async function handleRegisterButtonClick(item: any, event: Event) {
  event.stopPropagation() // 阻止事件冒泡，避免触发卡片点击

  // 检查是否是培训类
  if (isTrainingSubject(item)) {
    // 弹出确认框
    Modal.confirm({
      title: '提示',
      width: 500,
      icon: h(ExclamationCircleFilled, { style: 'color: #1c446b;' }),
      content: h('div', { style: 'font-size: 14px; line-height: 28px; color: #333; padding: 8px 0;' }, [
        h('p', { style: 'margin: 0 0 16px 0; font-size:16px;font-weight: 500;' }, '培训费费用需单独缴纳，费用为 600 元，是否报名？'),
      ]),
      okText: '是',
      cancelText: '否',
      okButtonProps: { style: { backgroundColor: '#1c446b', border: 'none', borderRadius: '0' } } as any,
      cancelButtonProps: { style: { borderRadius: '0' } } as any,
      centered: true,
      onOk: async () => {
        // 用户点击确认，创建报名记录，只传 subject_code
        if (creatingTrainingRegistration.value)
          return
        creatingTrainingRegistration.value = true
        try {
          const payload = {
            username: JSON.parse(localStorage.getItem('userInfo') || '{}').userName,
            family_name: '',
            given_name: '',
            title_en: 'Mr.',
            gender_en: 'male',
            gender: null,
            exam_fee: item?.exam_fee ?? item?.exam_subject?.exam_fee ?? '',
            examinee_number: '',
            phone: JSON.parse(localStorage.getItem('userInfo') || '{}').userPhone,
            country_en: 'CHINA',
            subject_code: item?.subject_code,
            registration_status: 1,
            company_name: JSON.parse(localStorage.getItem('userInfo') || '{}').userCompany,
          }
          const resp = await submitRegistrationApi(payload) as any
          if (resp?.code === 0 || resp?.success) {
            Modal.success({
              title: '提示',
              content: '报名信息已提交，请尽快完成缴费',
              centered: true,
              onOk: () => {
                router.push('/myexamlist/myExam')
              },
            })
          }
          else {
            message.error(resp?.message || '报名失败，请稍后重试')
          }
        }
        catch (error: any) {
          console.error('报名失败', error)
          message.error(error?.message || '报名失败，请稍后重试')
        }
        finally {
          creatingTrainingRegistration.value = false
        }
      },
    })
    return
  }

  // 如果不是培训类，执行原有的点击逻辑
  showExamTypeSelection(item)
}

function handleCardClick(item: any) {
  if (isTrainingSubject(item)) {
    clickSubject(item)
    return
  }
  showExamTypeSelection(item)
}

function showExamTypeSelection(item: any) {
  const selectedMode = ref<'first' | 'makeup'>('first')

  const renderRadioContent = () => h('div', { class: 'exam-type-radio-wrap' }, [
    h(Radio.Group, {
      value: selectedMode.value,
      'onUpdate:value': (val: 'first' | 'makeup') => {
        selectedMode.value = val
      },
    }, () => [
      h(Space, { size: 40 }, () => [
        h(Radio, { value: 'first', style: 'font-size: 16px;' }, () => '首次报名'),
        h(Radio, { value: 'makeup', style: 'font-size: 16px;' }, () => '补考报名'),
      ]),
    ]),
  ])

  Modal.confirm({
    title: '请选择报名类型',
    icon: null,
    class: 'exam-type-modal',
    width: 500,
    okText: '是',
    cancelText: '否',
    centered: true,
    maskClosable: true,
    closable: true,
    content: () => renderRadioContent(),
    onOk: () => {
      navigateToExamForm(item, selectedMode.value)
    },
  })
}

function navigateToExamForm(item: any, mode: 'first' | 'makeup') {
  if (!item || !item.subject_code) {
    message.warning('当前科目信息不完整，请稍后再试')
    return
  }
  if (mode === 'first') {
    router.push({
      path: '/form/regrationform',
      query: { subjectCode: item.subject_code },
    })
    return
  }
  const makeupSubject = findMakeupSubject(item)
  if (!makeupSubject) {
    router.push({
      path: '/form/makeupregistrationform',
      query: {
        subjectCode: item.subject_code,
        mode: 'makeup',
      },
    })
    return
  }
  router.push({
    path: '/form/makeupregistrationform',
    query: { subjectCode: makeupSubject.subject_code },
  })
}
</script>

<!-- 设计出  报名的选择 -->
<template>
  <page-container :loading="loading">
    <!-- class="subject-wrapper" -->
    <div
      style="
    position: relative;
    top: -30px;
    "
    >
      <div class="subject-tabs" :class="[`style-${tabStyleMode}`]">
        <button
          class="subject-tab-btn"
          :class="{ active: activeTab === 'exam' }"
          @click="activeTab = 'exam'"
        >
          <span>
            考试

          </span>
        </button>
        <button
          class="subject-tab-btn"
          :class="{ active: activeTab === 'training' }"
          @click="activeTab = 'training'"
        >
          培训
        </button>
      </div>
      <a-row
        v-if="filteredSubjects.length"
        style="
        overflow-y: scroll;
        height: 79vh;
        margin-bottom: 120px;

      "
        :gutter="[24, 24]"
      >
        <a-col
          v-for="item in filteredSubjects"
          :key="item.id" style="
        padding-bottom: 50px;
        " :xs="24" :sm="12" :lg="8"
        >
          <div
            style="
            min-height: 160px;
            height: auto;
            border-radius:5px;
            "
            class="subject-card" @click="handleCardClick(item)"
          >
            <div
              class="subject-cover"
              :style="getCoverInlineStyle(item)"
            >
              <div class="subject-footer">
                <span
                  class="subject-action"
                  style="opacity:0;"
                >{{ getSubjectStatus(item).action }}</span>
                <span
                  class="subject-status"
                >
                  {{ getSubjectStatus(item).text }}
                </span>
              </div>
            </div>
            <div class="subject-body">
              <div class="subject-name">
                2025年{{ item.subject_name ? item.subject_name.slice(0, -4) : '' }}
              </div>
              <div class="subject-footer">
                <span
                  class="subject-action"
                  style="opacity:0;"
                >{{ getSubjectStatus(item).action }}</span>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <template
                    v-for="(contact, index) in [getContactInfo(item)]"
                    :key="index"
                  >
                    <!-- 电话图标 -->
                    <Popover
                      trigger="hover"
                      placement="top"
                    >
                      <template #content>
                        <div style="min-width: 180px;">
                          <p style="margin: 4px 0; display: flex; align-items: center; gap: 8px;">
                            <UserOutlined style="color: #1890ff;" />
                            <span>{{ contact.name }}</span>
                          </p>
                          <p style="margin: 4px 0; display: flex; align-items: center; gap: 8px;">
                            <PhoneOutlined style="color: #52c41a;" />
                            <a :href="`tel:${contact.phone}`" style="color: #52c41a; text-decoration: none;">
                              {{ contact.phone }}
                            </a>
                          </p>
                        </div>
                      </template>
                      <Button
                        type="text"
                        size="small"
                        style="
                          padding: 4px;
                          height: 32px;
                          width: 32px;
                          display: inline-flex;
                          align-items: center;
                          justify-content: center;
                          color: #52c41a;
                          border-radius: 4px;
                        "
                        @click.stop
                      >
                        <PhoneOutlined style="font-size: 16px;" />
                      </Button>
                    </Popover>

                    <!-- 邮箱图标 -->
                    <Popover
                      trigger="hover"
                      placement="top"
                    >
                      <template #content>
                        <div style="min-width: 180px;">
                          <p style="margin: 4px 0; display: flex; align-items: center; gap: 8px;">
                            <UserOutlined style="color: #1890ff;" />
                            <span>{{ contact.name }}</span>
                          </p>
                          <p style="margin: 4px 0; display: flex; align-items: center; gap: 8px;">
                            <MailOutlined style="color: #fa8c16;" />
                            <a :href="`mailto:${contact.email}`" style="color: #fa8c16; text-decoration: none;">
                              {{ contact.email }}
                            </a>
                          </p>
                        </div>
                      </template>
                      <Button
                        type="text"
                        size="small"
                        style="
                          padding: 4px;
                          height: 32px;
                          width: 32px;
                          display: inline-flex;
                          align-items: center;
                          justify-content: center;
                          color: #fa8c16;
                          border-radius: 4px;
                        "
                        @click.stop
                      >
                        <MailOutlined style="font-size: 16px;" />
                      </Button>
                    </Popover>
                  </template>
                  <a-button
                    style="
                      border-radius: 5px;
                      height: 36px;
                    "
                    type="primary"
                    class="register-btn"
                    size="large"
                    @click.stop="handleRegisterButtonClick(item, $event)"
                  >
                    <span
                      style="
                        position: relative;
                        top: -1px;
                      "
                    >
                      立即报名
                    </span>
                  </a-button>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-empty
        v-else
        description="暂无相关科目"
        style="margin-top: 60px;"
      />
    </div>
  </page-container>
</template>

<style scoped>
.subject-wrapper {
  background-color: #ffffff;
  padding: 24px 28px 32px;
  margin-bottom: 120px;
  position: relative;
  top: -20px;
  height: 87vh;
  border-radius: 5px;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.35);
}
div::-webkit-scrollbar {
  width: 3px; /* 滚动条宽度 */
}
div::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1); /* 半透明黑色，你可以根据需要调整透明度 */
  border-radius: 4px; /* 滑块圆角 */
}
.subject-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.subject-title {
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
}
.subject-divider {
  margin: 0;
  flex: 1;
}
.subject-card {
  background: #fff;
  border-radius: 14px;
  margin:10px 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 24px 45px -22px rgba(42, 84, 156, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
/* #376d9b */
.subject-card:hover {
  /* transform: translateY(-6px); */
  box-shadow: 0 28px 50px -20px rgba(42, 84, 156, 0.45);
}
.subject-cover {
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
}
.subject-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0px 0 28px;
  align-items: center;
}
.subject-tabs.style-capsule .subject-tab-btn {
  min-width: 120px;
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid #376d9b;
  background: #fff;
  color: #376d9b;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  letter-spacing: 1px;
}
.subject-tabs.style-capsule .subject-tab-btn.active {
  background: linear-gradient(120deg, #1c446b, #2f7adf);
  color: #fff;
  box-shadow: 0 18px 32px -18px rgba(28, 68, 107, 0.8);
  border-color: transparent;
}
.subject-tabs.style-capsule .subject-tab-btn:not(.active):hover {
  background-color: rgba(55, 109, 155, 0.08);
}
.subject-tabs.style-underline {
  gap: 0;
  border-bottom: 2px solid rgba(55, 109, 155, 0.2);
}
.subject-tabs.style-underline .subject-tab-btn {
  border: none;
  background: transparent;
  padding: 10px 30px;
  font-size: 22px;
  color: #989fac;
  position: relative;
  border-radius: 0;
  font-weight: 500;
}
.subject-tabs.style-underline .subject-tab-btn::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -2px;
  height: 3px;
  background: linear-gradient(90deg, #547ca3, #547ca3);
  opacity: 0;
  transform: scaleX(0.6);
  transition: all 0.2s ease;
}
.subject-tabs.style-underline .subject-tab-btn.active {
  color: #1c446b;
}
.subject-tabs.style-underline .subject-tab-btn.active::after {
  opacity: 1;
  transform: scaleX(1);
}
.subject-tabs.style-glass {
  gap: 8px;
}
.subject-tabs.style-glass .subject-tab-btn {
  min-width: 140px;
  padding: 12px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}
.subject-tabs.style-glass .subject-tab-btn.active {
  background: rgba(44, 97, 171, 0.85);
  color: #fff;
  box-shadow: 0 15px 35px -20px rgba(28, 68, 107, 0.8);
  border-color: transparent;
}
.subject-tab-btn {
  cursor: pointer;
}
.subject-category-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(4px);
}
.chip-training {
  background: rgba(16, 185, 129, 0.9);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
.chip-exam {
  background: rgba(59, 130, 246, 0.9);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}
.subject-status {
  position: absolute;
  top: 14px;
  right: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}
.subject-body {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100% - 190px);
}
:deep(.tab-style-picker .ant-segmented) {
  background: #f3f4f6;
  padding: 4px;
  border-radius: 999px;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(28, 68, 107, 0.08);
}
:deep(.tab-style-picker .ant-segmented-item-selected) {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 22px -18px rgba(28, 68, 107, 0.6);
}
.tab-style-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.picker-label {
  font-size: 15px;
  color: #4b5563;
}
.subject-category-text {
  background-color: red;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.text-training {
  color: #0f766e;
}
.text-exam {
  color: #1d4ed8;
}
.subject-name {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}
.subject-meta {
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}
.meta-dot {
  font-size: 8px;
  color: #9ca3af;
}
.subject-desc {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.55;
  min-height: 42px;
}
.subject-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.subject-contact {
  background: #f3f6fb;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #344054;
  line-height: 1.6;
  border: 1px solid rgba(99, 126, 172, 0.2);
}
.subject-contact p {
  margin: 0;
}
.subject-contact p + p {
  margin-top: 4px;
}
.subject-action {
  font-size: 13px;
  color: #2563eb;
}
.subject-footer :deep(.ant-btn) {
  border-radius: 999px;
  padding: 0 16px;
  height: 30px;
}
.subject-status.tag-primary {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}
.subject-status.tag-orange {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}
.subject-status.tag-blue {
  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
}
.subject-status.tag-green {
  background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
}
.subject-status.tag-red {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}
.subject-status.tag-gray {
  background: rgba(149, 158, 172, 0.78);
}
:deep(.exam-type-modal .ant-modal-content) {
  border-radius: 14px;
  padding: 24px 30px 22px;
}
:deep(.exam-type-radio-wrap) {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
:deep(.exam-type-radio-wrap .ant-radio-group) {
  display: flex;
  gap: 60px;
}
:deep(.exam-type-radio-wrap .ant-radio-wrapper) {
  font-size: 16px;
  color: #1c446b;
  font-weight: 600;
}
@media (max-width: 768px) {
  .subject-wrapper {
    padding: 16px;
  }
  .subject-body {
    padding: 16px;
  }
}
</style>
<!-- <a-result status="404" title="401" sub-title="登录已过期，请重新登陆">
  <template #extra>
    <a-button type="primary" @click="login">
      跳转登录
    </a-button>
  </template>
</a-result> -->
